<template>
  <a @click="handleChange" type="text" :class="['sider-trigger-a', collapsed ? 'collapsed' : '']"><Icon :type="icon" :size="size"/></a>
</template>
<script>
export default {
  name: 'siderTrigger',
  props: {
    collapsed: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: 'md-menu'
    },
    size: {
      type: Number,
      default: 26
    }
  },
  methods: {
    handleChange () {
      // this.$emit('on-change')
    }
  }
}
</script>
<style lang="stylus" scoped>
.sider-trigger-a
  padding: 6px
  width: 40px
  height: 40px
  display: inline-block
  text-align: center
  color: #5c6b77
  margin-top: 12px
  i
    transition: transform .2s ease
.collapsed i
    transform: rotateZ(90deg)
    transition: transform .2s ease
</style>
